<template>
  <div>
    <!-- 开关 -->
    <div>
      开关，通过active-value和inactive-value来设置绑定的打开和关闭的值<br />
      <el-switch
        v-model="switch1"
        active-text="按月付费"
        inactive-text="按年付费"
      >
      </el-switch>
      <el-switch
        style="display: block"
        v-model="switch2"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-text="按月付费"
        inactive-text="按年付费"
        active-value="1"
        inactive-value="0"
      >
      </el-switch>
    </div>
    <el-input v-model="switch2"></el-input>
    <el-divider></el-divider>

    <!-- 滑块 -->
    <div class="block">
      <span class="demonstration">默认</span>
      <el-slider v-model="sliderValue"></el-slider>
    </div>
    <el-input v-model="sliderValue"></el-input>
    <el-divider></el-divider>

    <!-- collapse 展开折叠 -->
    <div>collapse 展开折叠</div>
    <div>
      <el-button @click="show3 = !show3">Click Me</el-button>

      <div style="margin-top: 20px; height: 200px">
        <el-collapse-transition>
          <div v-show="show3">
            <div class="transition-box">el-collapse-transition</div>
            <div class="transition-box">el-collapse-transition</div>
          </div>
        </el-collapse-transition>
      </div>
    </div>
    <el-divider></el-divider>

    <!-- Radio 单选框 -->
    <div>Radio 单选框</div>
    <el-radio-group v-model="radio" @change="radioFn()">
      <el-radio :label="3">备选项</el-radio>
      <el-radio :label="6">备选项</el-radio>
      <el-radio :label="9">备选项</el-radio>
    </el-radio-group>
    <el-input v-model="radio"></el-input>
    <el-divider></el-divider>

    <!-- 多选/全选 -->
    <el-checkbox v-model="checkAll" @change="handleCheckAllChange"
      >全选</el-checkbox
    >
    <div style="margin: 15px 0"></div>
    <el-checkbox-group
      v-model="checkedCities"
      @change="handleCheckedCitiesChange"
    >
      <el-checkbox v-for="city in cities" :label="city" :key="city">{{
        city
      }}</el-checkbox>
    </el-checkbox-group>
    <el-divider></el-divider>

    <!-- upload上传 -->
    <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
    <el-divider></el-divider>

    <!-- colorPicker -->
    <div class="block">
      <el-color-picker v-model="color2"></el-color-picker>
    </div>
    <el-input v-model="color2"></el-input>

    <el-radio v-model="radio1" label="1">备选项</el-radio>
    <el-radio v-model="radio1" label="2">备选项</el-radio>
    <el-divider></el-divider>

    <!-- Description描述列表 -->
    <el-descriptions class="margin-top" title="带边框列表" :column="3" border>
      <el-descriptions-item label="用户名">
        <el-input
          v-model="desName"
          style="width: 200px; border: none"
        ></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
      <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
      <el-descriptions-item label="备注">
        <el-tag size="small">学校</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="联系地址"
        >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
      >
    </el-descriptions>
    <el-divider></el-divider>

    <!-- 非浮层提示元素 -->
    <div>非浮层提示元素</div>
    <el-alert title="成功提示的文案" type="success"> </el-alert>
    <el-alert title="消息提示的文案" type="info"> </el-alert>
    <el-alert title="警告提示的文案" type="warning"> </el-alert>
    <el-alert title="错误提示的文案" type="error"> </el-alert>
    <el-divider></el-divider>

    <!-- Image 图片 -->
    <div>Image 图片</div>
    <el-divider></el-divider>

    <!-- 验证码 -->
    <div>验证码</div>
    <Verify
      @success="alert('success')"
      @error="alert('error')"
      :type="3"
    ></Verify>
  </div>
</template>

<script>
import { nanoid } from 'nanoid'
import Verify from 'vue2-verify'

export default {
  created () {
    console.log(nanoid())
    console.log(nanoid())
  },
  data () {
    return {
      // 开关
      switch1: true,
      switch2: 1,

      // 滑块
      sliderValue: 5,
      data: [
        {
          label: '一级 1',
          children: [
            {
              label: '二级 1-1',
              children: [
                {
                  label: '第一个'
                },
                {
                  label: '第2个'
                }
              ]
            }
          ]
        },
        {
          label: '一级 2',
          children: [
            {
              label: '二级 2-1',
              children: [
                {
                  label: '三级 2-1-1'
                }
              ]
            },
            {
              label: '二级 2-2',
              children: [
                {
                  label: '三级 2-2-1'
                }
              ]
            }
          ]
        },
        {
          label: '一级 3',
          children: [
            {
              label: '二级 3-1',
              children: [
                {
                  label: '三级 3-1-1'
                }
              ]
            },
            {
              label: '二级 3-2',
              children: [
                {
                  label: '三级 3-2-1',
                  children: [
                    {
                      label: '666'
                    }
                  ]
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },

      // 展开折叠
      show3: true,

      // Radio单选框
      radio: 3,

      // 多选/全选
      checkAll: false,
      checkedCities: ['上海', '北京'],
      cities: ['上海', '北京', '广州', '深圳'],

      // upload
      dialogImageUrl: '',
      dialogVisible: false,

      // colorPicker
      color2: '',
      radio1: 1,

      // Description描述列表
      desName: ''
    }
  },
  methods: {
    alert (text) {
      console.log(text)
    },
    handleNodeClick (data) {
      console.log(data)
    },
    boxColorFn (node) {
      console.log(node)
    },
    radioFn (value) {
      console.log(value)
    },
    handleCheckAllChange (val) {
      console.log(val)
      this.checkedCities = val ? this.cities : []
    },
    handleCheckedCitiesChange (value) {
      console.log(value)
      const checkedCount = value.length
      this.checkAll = checkedCount === this.cities.length
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  },
  components: {
    Verify
  }
}
</script>

<style scoped lang="less">
.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

::v-deep .el-tree-node__content {
  height: auto;
}
</style>
